import React, { PureComponent } from 'react';
import { Collapse } from 'antd';
import './index.less';

const Toolbox = React.memo(props => {
  const { options = [], Comp } = props;
  const renderOption = option => {
    return (
      <Comp
        title={option.title}
        node={option.node}
        key={option.key || option.title}
      />
    );
  };
  const keys = options.map(item => item.key);
  return (
    <Collapse defaultActiveKey={keys} className="group">
      {options.map(group => (
        <Collapse.Panel
          header={<div className="group-title">{group.title}</div>}
          key={group.key}
        >
          <div className="group">{group.buttons.map(renderOption)}</div>
        </Collapse.Panel>
      ))}
    </Collapse>
  );
});

class Editor extends PureComponent {
  static defaultProps = {
    options: [],
    ToolboxButtonComp: null
  };

  render() {
    const { children, options, ToolboxButtonComp } = this.props;
    return (
      <div className="content">
        <div className="sidebar">
          <Toolbox options={options} Comp={ToolboxButtonComp} />
        </div>
        <div className="sidebar-panel-button" />
        <div className="editor">{children}</div>
      </div>
    );
  }
}

export default Editor;
